<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员</title>
    <link rel="stylesheet" href="css/shouvip.css">
</head>
<body>
<!--头部-->

<!--灰色格-->
<section>
    <article>
        <ul class="v_title">
            <li>
                <div class="v_search">
                    <img src="img/serchicon.png" alt="">
                    <input type="text" placeholder="搜索" class="v_sousu">
                </div>
            </li>

            <li>
                <div class="v_date">
                    <p style="font-size: 12px">创建时间:</p>
                    <div class="v_date_input">
                        <input type="text" placeholder="请选择日期">
                        <img src="img/datechose.png" alt="">
                    </div>
                    <p style="font-size: 12px">至</p>
                    <div class="v_date_input">
                        <input type="text" placeholder="请选择日期">
                        <img src="img/datechose.png" alt="">
                    </div>
                </div>
            </li>
            <li>
                <div class="v_btn">
                    <button>查询</button>
                    <button style="width: 50pt;text-align: center">
                        <a href="vipadd2.html" style="color: white"> 新建会员</a>
                    </button>
                </div>
            </li>
        </ul>
    </article>
</section>

<!--会员详情-->
<div id="hyvip">
    <div class="hy_cont">
        <ul class="hy_top">
            <li style="width: 70pt;text-align: center">卡号</li>
            <li style="width: 90pt;text-align: center">姓名</li>
            <li style="width: 94pt;text-align: center">电话</li>
            <li style="width: 88pt;text-align: center">会员等级</li>
            <li style="width: 94pt;text-align: center">消费金额</li>
            <li style="width: 183pt;text-align: center">消费详情</li>
            <li style="width: 64pt;text-align: center">操作</li>
        </ul>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000001</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000002</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000003</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000004</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000005</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000006</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000007</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000008</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
        <ol style="display: flex;" class="hy_bott">
            <li style="width: 70pt;text-align: center">000009</li>
            <li style="width: 90pt;text-align: center">李国栋</li>
            <li style="width: 94pt;text-align: center">17312597219</li>
            <li style="width: 88pt;text-align: center">钻石会员</li>
            <li style="width: 94pt;text-align: center">88888</li>
            <li style="width: 183pt;text-align: center">2017.12.25婚纱照+婚庆88888元</li>
            <li style="width: 64pt;text-align: center;" ><a href="" style="color:rgb(17,100,219)">详情</a></li>
        </ol>
    </div>
</div>
<!--底部-->
<div id="foter">
    <div class="foter_bot">
        <ul class="foter_cot">
            <li style="width: 51pt;color: #666666">上一页</li>
            <li style="background: rgb(17,100,219);color: white">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>...</li>
            <li style="width: 29pt;">20</li>
            <li style="width: 51pt;">下一页</li>
        </ul>

        <div class="fot_dibu">
            <span>共20页</span>
            <span style="margin-left: 12px">到</span>
            <input type="text" style="width: 30pt;height: 19pt;">
            <button class="btn">确定</button>
            <span>页</span>
        </div>
    </div>
</div>


</body>
</html>